// 创建外壳App组件
// 使用import {模块名} from '模块路径' 必须要使用分别暴露的方式,export .....
import React, {Component} from "react";

import Header from "../src/pages/Header"
import Footer from "./components/Footer";
import List from "./components/List";
import "./App.css"

export default class App extends Component {

    // 状态在哪里,操作状态的方法就在哪里
    state = {
        // 初始化状态
        todos: [
            {id: 1, name: '吃饭', done: true},
            {id: 2, name: '睡觉', done: true},
            {id: 3, name: '打代码', done: false},
            {id: 4, name: '下棋', done: true}

        ]
    }

    // 添加todo,接收的参数是一个todo对象
    addTodo = (todoObj) => {
        console.log('todoObj', todoObj)
        const {todos} = this.state
        // 把新的todo放到前面
        const newTodos = [todoObj, ...todos]
        this.setState({todos: newTodos})
    }

    // 更新todo
    updateTodo = (id, done) => {
        // 获取状态中的todos
        const {todos} = this.state
        // 匹配处理数据
        const newTodos = todos.map(todoObj => {
            // 表示如果id相同的话就复制一份对象并修改done的值
            if (todoObj.id === id) return {...todoObj, done:done}
            else return todoObj
        })

        console.log('newTodos',newTodos)
        this.setState({todos: newTodos})


    }

    // 删除一个todo
    deleteTodo = (id)=>{
        const {todos} = this.state
        const newTodos = todos.filter(todo=>{
            // 删除指定ID的todoObj对象
            return todo.id !== id
        })
        this.setState({todos: newTodos})

    }

    // 全选todo
    checkAllTodos = (done)=>{
        const {todos} = this.state

        const newTodos = todos.map(todoObj=>{
            // 复制一份todoObj并把done的值改变
            console.log('todoObj####',todoObj)
            return {...todoObj,done}


        })
        console.log('newTodos',newTodos)
        this.setState({todos: newTodos})
    }

    // 清空已完成的
    clearAllDone = ()=>{
        const {todos} = this.state
        const newTodos =   todos.filter(todoObj=>{
            return !todoObj.done
        })
        this.setState({todos: newTodos})
    }
    render() {
        const {todos} = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} deleteTodo={this.deleteTodo} updateTodo={this.updateTodo}/>
                    <Footer clearAllDone={this.clearAllDone} checkAllTodos={this.checkAllTodos} todos={todos}/>
                </div>
            </div>
        );
    }
}
